<template>
    <div class="test">
        <a-card :loading="loading" title="CSS变量" class="card card1">
            <span>通过vue3的css v-bind实现</span>
            <div class="testBox"></div>
            <a-button type="primary" @click="click">变色</a-button>
        </a-card>
        <a-card :loading="loading" title="CSS变量" class="card">
            <div class="testBox"></div>
            <a-button type="primary" @click="click">变色</a-button>
        </a-card>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

let color = ref("red");

const click = ()=> {
    if (color.value === "red") {
        color.value = "blue";
    }else{
        color.value = "red";
    }
}

let testArr:string[] = ['1', '2']

</script>

<style lang="scss" scoped>
.card{
    display: inline-block;
    width: 300px;
    margin: 10px;
}
.card1{
    width: 250px;
    .testBox{
        width: 100px;
        height: 100px;
        background-color: v-bind('color');
        margin: 20px 0;
    }
}
</style>